<!DOCTYPE html>
<html>
<head>
  <title>Popcorn google Map Plug-in Demo</title>
  
  <script src="../../popcorn.js"></script>
  <script src="popcorn.googlemap.js"></script>
  <script type="text/javascript">
    document.addEventListener( "DOMContentLoaded", function() {
      var p = Popcorn( "#video" )
      .volume( 0 )
      .play()
      .googlemap({
        start: 0,
        end: 10,
        type: "ROADMAP",
        target: "map",
        lat: 43.665429,
        lng: -79.403323,
        zoom: "10"
      })
      .googlemap({
        start: 10,
        end: 20,
        type: "STAMEN-TONER",
        target: "map",
        lat: 37.7706,
        lng: -122.3782,
        zoom: 12
      })
      .googlemap({
        start: 0,
        end: 40,
        type: "STREETVIEW",
        target: "map3",
        location: "6th Line, Oakville, Ontario",
        //lat: 35.7795324,
        //lng: -78.63915450000002,
        zoom: "1",
        heading: "180",
        pitch: "1",
				interval: 1000,
				tween: "York university"
      })
      .googlemap({
        start: 0,
        end: 40,
        type: "STREETVIEW",
        target: "map5",
        location: "Buffallo",
        //lat: 35.7795324,
        //lng: -78.63915450000002,
        zoom: "1",
        heading: "180",
        pitch: "1",
				interval: 1000,
				tween: "Ottawa"
      })
      .googlemap({
        start: 0,
        end: 20,
        type: "STREETVIEW",
        target: "map4",
        lat: 35.7795324,
        lng: -78.63915450000002,
        zoom: "1",
        heading: "180",
        pitch: "1",
        tween: [
          {
            position: {
              lat: 35.778056,
              lng: -78.63903579999999
            },
            pov: {
              heading: 183.5,
              zoom: 1,
              pitch: 1
            },
            interval: 2000
          },
          {
            position: {
              lat: 35.7770258,
              lng: -78.63929150000001
            },
            pov: {
              heading: 180,
              zoom: 1,
              pitch: 1
            },
            interval: 2000
          },
          {
            position: {
              lat: 35.775581,
              lng: -78.639395
            },
            pov: {
              heading: 180,
              zoom: 1,
              pitch: 1
            },
            interval: 2000
          },
          {
            position: {
              lat: 35.775581,
              lng: -78.639395
            },
            pov: {
              heading: 105,
              zoom: 1,
              pitch: 1
            },
            interval: 2000
          },
          {
            position: {
              lat: 35.775581,
              lng: -78.639395
            },
            pov: {
              heading: 0,
              zoom: 1,
              pitch: 1
            },
          	interval: 2000
          }
        ]
      })
      .googlemap({
        start: 0,
        end: 30,
        type: "ROADMAP",
        target: "map2",
        location:"boston",
        zoom: 15
      })
      .googlemap({
        start: 0,
        end: 20,
        type: "STREETVIEW",
        target: "map1",
        lat: 43.665429,
        lng: -79.403323,
        zoom: "1",
        heading: "0",
        pitch: "1"
      });
    }, false);
  </script>
</head>
<body>

  <h1 id="qunit-header">Popcorn google Map Plug-in Demo</h1>
  <p> A Google Map displaying Toronto, Ontario will appear at 0 seconds and disappear at 20 seconds.</p>
  <p> A Google Map Streetview image of Toronto, Ontario will appear at 0 seconds and disaapear at 20 seconds</p>
  <p> A Google Map displaying Boston will appear at 0 seconds and disappear at 30 seconds.</p>
  <p> A Google Map Streetview tweening from Oakville, Ontario to York University will appear at 0 seconds and disaapear at 40 seconds</p>
  <p> A Google Map Streetview tweening from 217 Fayetteville Street to East Davie Street  will appear at 0 seconds and disaapear at 20 seconds - Using hardcoded lat+lng values</p>
  <p> A Google Map Streetview tweening from Buffallo to Ottawa  will appear at 0 seconds and disaapear at 40 seconds</p>
  <div>

    <video id="video"
      controls
      width="250px"
      poster="../../test/poster.png">

      <source id="mp4"
        src="../../test/trailer.mp4"
        type='video/mp4; codecs="avc1, mp4a"'>

      <source id="ogv"
        src="../../test/trailer.ogv"
        type='video/ogg; codecs="theora, vorbis"'>

      <p>Your user agent does not support the HTML5 Video element.</p>

    </video>
  </div>

  <div style="width:2000px">
    <div id="map" style="position:relative;float:left;width:300px;height:400px"><p>Locations in this video:</p></div>
    <div id="map1" style="position:relative;float:left;width:300px;height:400px"><p>Locations in this video:</p></div>
    <div id="map2" style="position:relative;float:left;width:300px;height:400px"><p>Locations in this video:</p></div>
    <div id="map3" style="position:relative;float:left;width:300px;height:400px"><p>Locations in this video:</p></div>
    <div id="map4" style="position:relative;float:left;width:300px;height:400px"><p>Locations in this video:</p></div>
    <div id="map5" style="position:relative;float:left;width:300px;height:400px"><p>Locations in this video:</p></div>
  </div>
</body>
</html>

